
<%@ page pageEncoding="UTF-8" %>
<%@ page import="swu.myt.*" %>

<%@ page import="java.util.*" %>

<%
   HttpSession session1=request.getSession();
		
   String username = (String)session1.getAttribute("username");	
   
   List<Say> says = null;
   
   says = DBUtils.getsayings(username);
   
   int i = 0;
%>

<!DOCTYPE html>
<html>
	<head>
		<title>My Diaries</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
		<!-- web-font -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
		<!-- web-font -->
		<!-- js -->
		<script src="js/jquery.min.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		<!-- js -->
		<script src="js/modernizr.custom.js"></script>
		<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
		<!-- start-smoth-scrolling -->
	</head>
	<body>
		<div class="head-bg green">
			<!-- container -->
			<div class="container">
				<div class="head-logo">
					<a href="userhome.jsp"><img width="240px" height="44px" src="images/logo.png" alt="" /></a>
				</div>
				<div class="top-nav">
						<span class="menu"><img src="images/menu.png" alt=""></span>
							<ul class="cl-effect-1">
								<li><a href="userhome.jsp">HOME</a></li>                                             
								<li><a href="page.html">UPLOAD</a></li>
								<li><a href="records.jsp">DIARIES</a></li> 
								<li><a href="../logout">LOGOUT</a></li> 
								<li><a href="mail.html">MAIL US</a></li>  
							</ul>
							<!-- script-for-menu -->
							 <script>
							   $( "span.menu" ).click(function() {
								 $( "ul.cl-effect-1" ).slideToggle( 300, function() {
								 // Animation complete.
								  });
								 });
							</script>
						<!-- /script-for-menu -->
					</div>
				<div class="clearfix"> </div>
			</div>
			<!-- //container -->
		</div>
		<!-- news -->
		<div class="news">
			<h3>DIARIES</h3>
			
			
			<div class="latest-events">
				<!-- container -->
				<div class="container"  >
					<div class="news-grids"  id="sayingTable">
										
					<%
				while(i<says.size())	
				{		    
				    out.println("<div class=\"col-md-4 news-grid\">");
					out.println("<div class=\"news-grid-text\"><span>");					
					out.println(says.get(i).getDate());
					out.println("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
					out.println("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");	
					out.print("<button onclick=\"delete('");
					out.print(says.get(i).getSay());	
					out.println("')\" >删除</button></span></div>");			
					out.println(says.get(i).getSay());			
					out.println("<img  src=\"../upload/");
					out.print(says.get(i).getPic());		
					out.println("\" alt=\"\" />");	
					out.println("</p><div class=\"read-more blue\"><a href=\"#\">Read More &gt;&gt; --------------------------------------</a></div></div>");
				    i++;
				 }		
					%>
				<div class="clearfix"> </div>
				</div>
				</div>
				<button  class="mybutton" onclick="showSays(1)">第1页</button>
			    <button  class="mybutton" onclick="showSays(2)">第2页</button>
			    <button  class="mybutton" onclick="showSays(3)">第3页</button>
			    <button  class="mybutton" onclick="showSays(4)">第4页</button>
			    
				<!-- //container -->
			</div>
		</div>
		<!-- //news -->
		<!-- footer -->
		<div class="footer">
			<!-- container -->
			<div class="container">
				<div class="footer-left">
					<p>Design by <a href="#">myt</a></p>
				</div>
				<div class="footer-right">
					<div class="footer-nav">
						<ul>
							<li><a href="userhome.jsp">HOME</a></li>                                             
								<li><a href="page.html">UPLOAD</a></li>
								<li><a href="records.jsp">DIARIES</a></li> 
								<li><a href="../logout">LOGOUT</a></li> 
								<li><a href="mail.html">MAIL US</a></li>  
						</ul>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!-- //container -->
		</div>
		<!-- //footer -->
		<script type="text/javascript">
			$(document).ready(function() {
				/*
				var defaults = {
		  			containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
		 		};
				*/
				
				$().UItoTop({ easingType: 'easeOutQuart' });
				
			});
			
			 function showSays(page) {    
			   /*连接ajax*/    
		        $.ajax({
		            url: "../says?page=" + page,
		            method: "GET",
		            dataType: "json"
		        }).done(function(result){
		        /*连接成功，则得到传过来的json数据，在网页中写相应块*/
		          var says = result.says;
		          var t = $("#sayingTable");
		          t.empty();
		 	      for (var i=0; i<says.length; i++) {
		              var s = says[i];
		              var txt=$("<div class=\"col-md-4 news-grid\"></div>").html("<div class=\"news-grid-text\"><span>"+s.date+"</span></div>"+s.saying+"<img src=\"../upload/"+s.pic+"\" alt=\"\" />"+"</p><div class=\"read-more blue\"><a href=\"#\">Read More &gt;&gt; -----------------</a></div>");
				      t.append(txt);
		              }
		           }).fail(function(xhr, status){
		           /*失败则返回状态并进行提示*/
		            console.log(status);
		            var t = $("#sayingTable");
		            t.empty();
		            t.append("failajax");                  
		        });
		        console.log("button clicked!");
		    }
		    
		    var delete = function(saying) {    
			   /*连接ajax*/    
		        $.ajax({
		        
		            url: "../deletesays?saying=" + saying,
		            method: "POST",
		            /*dataType: "json"*/
		            console.log("哈哈!");
		        }).done(function(result){		        
		          var t = $("#sayingTable");
		          t.empty();		 	     
	              var txt=$("<p"></p>").html("删除成功");
			      t.append(txt);
		          }).fail(function(xhr, status){
		           /*失败则返回状态并进行提示*/
		            console.log(status);
		            var t = $("#sayingTable");
		            t.empty();
		            t.append("删除失败");                  
		        });
		        console.log("button clicked!");
		    }
					
		</script>
		
		
			<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!-- content-Get-in-touch -->
	</body>
</html>